<template>
  <div class="container">
    <h1>一个简易的富文本编辑组件</h1>
    <div class="edit">
      <div class="edit-control">
        <button
          class="edit-control-bold"
          :class="{'active': bold}"
          title="加粗"
          @click="changeTextStyle('Bold')"
        > B </button>
        <button
          class="edit-control-italic"
          :class="{'active': italic}"
          title="斜体"
          @click="changeTextStyle('Italic')"
        > I </button>
        <button
          class="edit-control-size"
          title="修改字号"
          @click="changeFontSize(size)"
        >
          H<span>{{ fontSize[size-3] }}</span>
         </button>
        <button
          titie="清空编辑框"
          @click="clearText"
        >
          <i class="el-icon-document-delete"></i>
        </button>
      </div>
      <!-- 采用div更容易自定义宽高 -->
      <div id="text-area" contenteditable="true"></div>
      <button
        class="submit"
        @click="showContent">提交文本</button>
    </div>
    <h2>编辑结果</h2>
    <div class="show">
      <div v-html="showText"></div>
    </div>
  </div>
</template>

<script>
export default {
  // name: 'HelloWorld',
  data () {
    return {
      showText: '',
      bold: false,
      italic: false,
      size: 3,
      fontSize: [
        '最小', '较小', '中等', '较大', '最大'
      ]
    }
  },
  methods: {
    changeTextStyle (prop) {
      document.getElementById('text-area').focus()
      document.execCommand(prop, false, null)
      if (prop === 'Bold') {
        this.bold = !this.bold
      }
      if (prop === 'Italic') {
        this.italic = !this.italic
      }
    },
    holdFocus () {
      document.getElementById('text-area').focus()
    },
    // 改变文本字体，设置了四档字体大小
    // execCommand方法只支持到1-7的font-size
    // 后续尝试优化这块儿
    changeFontSize () {
      console.log(this.size)
      if (this.size === 7) {
        this.size = 3
      } else this.size++
      document.getElementById('text-area').focus()
      document.execCommand('FontSize', false, this.size)
    },
    // 清空编辑内容
    clearText () {
      const el = document.getElementById('text-area')
      el.innerHTML = ''
      el.focus()
      this.bold = false
      this.italic = false
    },
    // 展示编辑的内容
    showContent () {
      const el = document.getElementById('text-area')
      this.showText = el.innerHTML
      console.log(this.showText)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: 20px;
  text-align: left;
  .edit {
    position: relative;
    width: 600px;
    &-control {
      padding: 0 10px;
      width: 100%;
      border-top: 1px solid #97979f;
      font-size: 20px;
      color: #97979f;
      button {
        margin: 5px 0;
        padding: 0 15px;
        border: none;
        font-size: 20px;
        color: #97979f;
        background-color: inherit;
        span {
          margin-left: 5px;
          font-size: 15px;
        }
      }
      &-bold {
        font-weight: bold;
      }
      &-italic {
        font-style:italic;
      }
      &-size {
        border-right: 1px solid #999 !important;
        border-left: 1px solid #999 !important;
      }
      .active {
       color: #4893ff;
      }
    }
    #text-area {
      padding: 10px;
      width: 100%;
      height: 200px;
      border: 1px solid rgb(146, 66, 66);
      &:empty::before {
        content: "请输入要编辑的文本";
        color: #999999;
        line-height: 1.5;
        font-size: 15px;
      }
      &:focus:before{
        content:none;
      }
    }
    .submit {
      position: absolute;
      bottom: 10px;
      right: 20px;
      width: 100px;
      border: none;
      border-radius: 5px;
      font-size: 20px;
      line-height: 1.5;
      color: #fff;
      background-color: #4893ff;
    }
  }
  h2 {
    padding:0 10px 10px;
    width: 600px;
    border-bottom: 2px solid #333;
  }
  .show {
    padding: 10px;
    width: 600px;
    height: 200px;
    border: 1px solid #333;
    border-radius: 10px;
  }
}
</style>
